<script setup lang="ts">
import { ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import HelpFilled from "@iconify-icons/ep/help-filled";
import CloseBold from "@iconify-icons/ep/close-bold";
import StackshareLine from "@iconify-icons/ri/stackshare-line";
import ShareLine from "@iconify-icons/ri/share-line";
import StrikethroughIcon from "@iconify-icons/ri/strikethrough";
const toolbarB = ref(false);

const showMenu = ref(false);

const clickToolbar = () => {
  toolbarB.value = !toolbarB.value;
  showMenu.value = !showMenu.value;
};
</script>

<template>
  <div class="toolbar-div">
    <div>
      <Transition>
        <div v-show="showMenu" class="toolbar-menu">
          <el-tooltip effect="dark" content="协同" placement="left-start">
            <el-button
              class="toolbar-btn"
              size="large"
              :icon="useRenderIcon(StackshareLine)"
              circle
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="接管" placement="left-start">
            <el-button
              class="toolbar-btn"
              size="large"
              :icon="useRenderIcon(ShareLine)"
              circle
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="释放" placement="left-start">
            <el-button
              class="toolbar-btn"
              size="large"
              :icon="useRenderIcon(StrikethroughIcon)"
              circle
            />
          </el-tooltip>
        </div>
      </Transition>
      <el-button
        @click="clickToolbar"
        class="toolbar-btn"
        type="primary"
        :icon="toolbarB ? useRenderIcon(CloseBold) : useRenderIcon(HelpFilled)"
        size="large"
        circle
      />
    </div>
  </div>
</template>

<style scoped>
.toolbar-div {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

.toolbar-menu {
  width: 40px;
}

.toolbar-btn {
  font-size: 24px;
  margin-left: 0px;
}
</style>
